<template>
  <div class="common-footer">
    <router-link to="/home" class="footer-item" :class="{active: $route.path.includes('/home') }">
      <i class="iconfont icon-home"></i>
      <span>首页</span>
    </router-link>
    <router-link to="/recommend" class="footer-item" :class="{ active: $route.path.includes('/recommend')}">
      <i class="iconfont icon-tuijian"></i>
      <span>推荐</span>
    </router-link>
    <router-link to="/search" class="footer-item" :class="{ active: $route.path.includes('/search')}">
      <i class="iconfont icon-sousuo"></i>
      <span>搜索</span>
    </router-link>
    <router-link to="/chat" class="footer-item" :class="{ active: $route.path.includes('/chat')}">
      <i class="iconfont icon-ziyuan"></i>
      <span>聊天</span>
    </router-link>
    <router-link to="personal" class="footer-item" :class="{ active: $route.path.includes('/personal')}">
      <i class="iconfont icon-geren"></i>
      <span>个人中心</span>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'commonFooter'
  }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
@import "~@/assets/style/mixins.styl"
.common-footer
  width 100%
  height 50px
  position fixed !important
  bottom 0
  left 0
  display flex
  border-top-1px(rgba(0,0,0,0.05))
  .footer-item
    flex 1
    height 50px
    background: #fff
    display flex
    flex-direction column
    justify-content space-around
    align-items center
    font-size 12px
    color: #333
    &.active
      color: #E02D23
    .iconfont
      font-size 25px
      &.icon-tuijian
        font-size 28px
      &.icon-ziyuan
        font-size 23px
    span
      margin-top: 2px
</style>
